<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.css">-->
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
    <link rel="canonical" href="https://getbootstrap.com/docs/4.6/examples/album/">


    <!-- Bootstrap core CSS -->
    <link href="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/bootstrap/5.1.3/css/bootstrap.min.css"
          rel="stylesheet">

    <style>
        .swiper {
            width: 100%;
            height: 300px;
        }

        .bg-sw {
            width: 100%;

        }
    </style>


    <style>

        /*轮播样式*/
        .swiper {
            width: 100%;
            height: 300px;
        }

        .bg-sw {
            width: 100%;

        }
        /*轮播样式*/

        .container {
            background: rgba(255, 255, 255, 0);
        }

        main {
            background: linear-gradient(to top right, #a1ffce 0%, #faffd1 100%);
            background: no-repeat;
            background: fixed
        }


        .col-sm-4.offset-md-1.py-4 {
            width: 60%;
        }

        .col-sm-8.col-md-7.py-4 {
            width: 30%;
        }

        ul li{

            float: left;

            margin-right: 30px;

        }

        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        a.logout_button {
            padding: 10px;
            text-decoration: none;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }


        .sousuo {
            border-radius: 100px;
            height: 100%;
            width: 100%;
            border: none;
            text-align: center;
            font-size: 25px;
            color: rgba(240, 248, 255, 0.850);
            background-color: rgba(255, 255, 255, 0.500);
        }


        .sousuo_button {
            position: relative;
            left: 20px;
            width: 20%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0);
            border-color: aquamarine;
            border-radius: 100px;
            border-style: solid;
            color: azure;
        }

        .backtop_button {
            width: 100px;
            height: 40px;
            background-color: rgba(255, 255, 255, 0);
            border-color: rgb(0, 0, 0);
            border-radius: 100px;
            border-style: solid;
            color: rgb(0, 0, 0);
            text-align: center;
            font-size: 17px;
        }

        .logout_button {
            width: 100px;
            height: 40px;
            background-color: rgba(255, 255, 255, 0);
            border-radius: 100px;
            border: solid aquamarine;
            color: aquamarine;
            text-align: center;
            font-size: 17px;
        }

        .text_style {
            color: #7fffd4;
            font-size: 85px;
            font-weight: 900;
        }

        a.btn.btn-primary.my-2 {
            font-size: 40px;
            font-weight: 900;
        }

        a.btn.btn-secondary.my-2 {
            font-size: 40px;
            font-weight: 900;
        }

        .rad {
            border-radius: 10px;
        }

        .videostyle {
            border-radius: 10px;
            width: 100%;
            height: 100%;
        }
    </style>

</head>
<body>

<header>
    <div class="collapse bg-dark" id="navbarHeader">
        <div class="container">
            <div class="row">
                <div class="col-sm-8 col-md-7 py-4">
                    <h4 id="usermassage" class="text-white">您好！
                        尊贵的<%=((User) request.getSession().getAttribute("user_info")).getUser_name()%>
                    </h4>
                    <p class="text-muted">Uid<%=((User) request.getSession().getAttribute("user_info")).getUser_uid()%>
                    </p>
                    <a class="logout_button" href="/user/logout">退出登录</a>
                </div>
                <div class="col-sm-4 offset-md-1 py-4">
                    <ul class="list-unstyled">
                        <li><a href="/video/user/main" class="logout_button">视频投稿中心</a></li>
                        <li><a href="/topic/user/main" class="logout_button">文章投稿中心</a></li>
                        <li><a href="/comment/user/main" class="logout_button">评论管理中心</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="navbar navbar-dark bg-dark shadow-sm">
        <div class="container d-flex justify-content-between">
            <p class="text_style" style="width: 90% ;text-align: center">HEAL</p>
            <button class="logout_button" type="button" data-toggle="collapse" data-target="#navbarHeader"
                    aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">更多
            </button>
        </div>
    </div>
</header>

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img class="bg-sw"
                                       src="https://ts1.cn.mm.bing.net/th/id/R-C.87f1a74f8be95c11784d352d04677a4c?rik=dAnC3dHoUdIBPA&riu=http%3a%2f%2fpic154.huitu.com%2fpic%2f20201225%2f2020673_20201225152913581020_0.jpg&ehk=1fT4XMAon3BVswnw9cYQwsFsdhVEzD5KLPRbBnu79bo%3d&risl=&pid=ImgRaw&r=0">
        </div>
        <div class="swiper-slide"><img class="bg-sw"
                                       src="https://ts1.cn.mm.bing.net/th/id/R-C.3e8d6642e9d216793933a15ee7c0d1e5?rik=xliMeaBp6nC30Q&riu=http%3a%2f%2fpic148.huitu.com%2fpic%2f20200825%2f2414338_20200825125657112060_0.jpg&ehk=SwdH0NWF8qEezoXupFsM8r1LnFLs2tDZXv3fqCiig9A%3d&risl=&pid=ImgRaw&r=0">
        </div>
        <div class="swiper-slide"><img class="bg-sw"
                                       src="https://ts1.cn.mm.bing.net/th/id/R-C.c9a01d801df4a558d3654fdce2bcc164?rik=%2bBWRmpd7RJrTIA&riu=http%3a%2f%2fpic124.huitu.com%2fpic%2f20190629%2f2020673_20190629170045918020_0.jpg&ehk=379psr0%2bsKUVFj4JTY3PZ9YpiFgAzOzjGqZVMQ2qQ70%3d&risl=&pid=ImgRaw&r=0">
        </div>
    </div>
    <!-- 如果需要分页器 -->
    <!--    <div class="swiper-pagination"></div>-->

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- 如果需要滚动条 -->
    <!--    <div class="swiper-scrollbar"></div>-->
</div>

</body>


<!--<script src="https://unpkg.com/swiper@8/swiper-bundle.js"> </script>-->
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<!--<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js.map"> </script>-->

<script>
    var mySwiper = new Swiper('.swiper', {
        direction: 'horizontal', // 垂直切换选项
        loop: true, // 循环模式选项

        autoplay: {
            delay: 3000,
            stopOnLastSlide: false,
            disableOnInteraction: true,
        },

        // 如果需要分页器
        // pagination: {
        //     el: '.swiper-pagination',
        // },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

        // 如果需要滚动条
        // scrollbar: {
        //     el: '.swiper-scrollbar',
        // },
    })
</script>
</html>